<template>
  <div>
    <div class="app-container">
      <div class="flex items-center justify-between mb-20px">
        <div>
          <div class="flex items-center gap-12px">
            <h1 class="text-22px font-600 text-#1f2329">事件管理</h1>
            <p>系统事件日志管理</p>
          </div>
          <p class="text-13px text-#646A73 mt-6px">查看和管理系统的事件日志和复现信息</p>
        </div>
        <div class="flex items-center gap-12px">
          <el-button icon="Histogram" type="warning" @click="delReplay()">删除复现</el-button>
          <el-button icon="DeleteFilled" type="danger" @click="clear()">清空全部</el-button>
        </div>
      </div>

      <div class="search-container flex items-center justify-between bg-white p-18px rounded-8px mb">
        <div class="search">
          <el-form ref="form" :model="searchData" label-width="80px" class="u-p-t-20" :inline="true" label-position="left">
            <el-form-item label="搜索">
              <el-input v-model="searchData['title like']" placeholder="请输入调试名称" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchData['name']" placeholder="请输入事件名称" />
            </el-form-item>
            <el-form-item label="" class="w-200px">
              <el-select v-model="searchData['replay']" placeholder="请选择事件类型">
                <el-option label="全部事件" value="" />
                <el-option label="复现事件" value="1" />
                <el-option label="系统事件" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: right; margin-right: 20px">
              <el-button type="primary" @click="getList(0)">筛选</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table v-loading="loading" :data="dkTableData" style="width: 100%" class="table">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="name" label="信息" width="350">
          <template #default="scope">
            <div>
              <p>说明：{{ scope.row.title }}</p>
              <p>
                事件：<el-tag type="danger" style="cursor: pointer" @click="search('name', scope.row.name)">{{ scope.row.name }}</el-tag>
                <el-tag v-if="scope.row.replay" type="primary" style="margin-left: 10px">复现ID：{{ scope.row.replay_id }}</el-tag>
              </p>
              <p>创建时间：{{ scope.row.create_time }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="值">
          <template #default="scope">
            <JsonViewer :value="scope.row.value" :copyable="true" />
          </template>
        </el-table-column>
        <el-table-column width="100" label="操作" align="center">
          <template #default="scope">
            <p>
              <el-button type="primary" @click="handleShow(scope.row)">详情</el-button>
            </p>
            <p class="my">
              <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </p>
            <p>
              <el-button type="info" :disabled="scope.row.replay === 1" @click="eventReplay(scope.row.id)">复现 </el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="bg-white rounded-8px p10px mt"
        background
        layout="total,prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="currentChange"
      />
    </div>
    <!--详情弹窗-->
    <el-dialog v-model="dialogVisible" title="事件参数" width="800px">
      <JsonViewer :value="detail.value" :copyable="true" :expand-depth="2" />
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { eventReplay, getEventSettingForm, getList, del, delReplay, clear } from '@/api/event'

export default {
  name: 'List',
  components: {},
  props: {
    value: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      dkTableData: [],
      searchData: {},
      dialogFormVisible: false,
      formWidth: '1000px',
      formData: null,
      loading: true,
      columns: ['微信通讯消息（wechat_message）', '名称', '值', '平台ID', '应用标识', '类型', '备注', '请求', '客户端', 'IP', '创建时间'],
      checkedColumn: ['id', '名称', '值', '类型', '备注'],
      detail: {},
      dialogVisible: false
    }
  },
  computed: {},
  mounted() {
    this.reset()
  },
  methods: {
    getPlatform() {
      getEventSettingForm().then((res) => {
        this.formData = res.data
        this.$refs.editForm.dialogFormVisible = true
      })
    },
    handleShow(item) {
      this.detail = item
      this.dialogVisible = true
    },
    handleDelete(item) {
      this.$confirm('此操作将永久删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(item.id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList(0)
        })
      })
    },
    // 删除复现
    delReplay() {
      this.$confirm('此操作将永久删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delReplay().then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList(0)
        })
      })
    },
    // 清空
    clear() {
      this.$confirm('此操作将永久删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clear().then((res) => {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.getList(0)
        })
      })
    },
    getList(page = 0) {
      this.page = page || this.page
      getList(this.page, this.pageSize, this.searchData).then((res) => {
        this.dkTableData = res.data
        this.total = parseInt(res.msg)
        this.loading = false
      })
    },
    currentChange(page) {
      this.getList(page)
    },
    reset() {
      this.searchData = {
        name: '',
        type: '',
        replay: ''
      }
      this.getList()
    },
    goBack() {
      this.$router.push('/home')
    },
    search(field, value) {
      this.searchData[field] = value
      this.getList(0)
    },
    handleColumnChange(val) {
      console.log(val)
      // this.columns = this.checkedColumn
    },
    eventReplay(id) {
      eventReplay(id).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        this.getList()
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
